<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="javascript:void(0);">发货</a></el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <div class="content">
                <el-card class="elcard">
                    <el-form :model="OrderFrom" ref="form" label-width="100px" v-for="(order,index) in OrderFrom.orderList" :key="index" size="mini">
                        <el-form-item label="订单号：">
                            <el-input v-model="order.ordername" :disabled="disabled"></el-input>
                        </el-form-item>
                        <el-form-item label="客户名称：">
                            <el-input v-model="order.cname" :disabled="disabled"></el-input>
                        </el-form-item>
                        <el-form-item label="收货地址：">
                            <el-input v-model="order.address" :disabled="disabled"></el-input>
                        </el-form-item>
                        <el-form-item label="联系人：">
                            <el-input v-model="order.uname" :disabled="disabled"></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话：">
                            <el-input v-model="order.phone" :disabled="disabled"></el-input>
                        </el-form-item>
                        <el-form-item label="选择标签：">
                            <template>
                                <el-transfer v-model="TagIdList" :data="data" :titles="titles" :button-texts="texts">
                                </el-transfer>
                            </template>
                        </el-form-item>
                        <el-form-item label="发货地址：">
                            <el-input v-model="OrderFrom.send_add" class="inpitel"></el-input>
                        </el-form-item>
                        <el-form-item label="收货地址：">
                            <el-input v-model="OrderFrom.take_add" class="inpitel"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <div style="float:right;margin-top:10px;">
                                <el-button type="primary" @click="send_order">立即发货</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </el-card>
    </div>
</template>

<script>
import { order_info_get, tag_info_get, send_order_put } from '../axios_api/api'
export default {
    data() {
        return {
            OrderFrom: {
                orderList: [],
                orderID: this.$route.query.orderID,
                send_add: '',
                take_add: '',
            },
            disabled: true,
            // 穿梭框data
            data: [],
            // 穿梭框选取的值
            TagIdList: [],
            titles: ['可选择', '可取消'],
            texts: ['取消', '添加'],
            // 标签列表
            TagInfo: [],
        };
    },
    mounted() {
        this.get_order();
        this.get_tag();
    },
    methods: {
        // 发货
        send_order() {
            if (this.TagIdList.length > 1) return this.$message.error('只能选择一个标签')
            else if (this.TagIdList.length < 1) return this.$message.error('请选择标签')
            let taglist = this.TagIdList
            let tid = '';
            for (let i = 0; i < this.TagInfo.length; i++) {
                for (let j = 0; j < taglist.length; j++) {
                    if (this.TagInfo[i].tag_id === taglist[j]) tid = this.TagInfo[i].id
                }
            }
            console.log(tid)
            let data = { id: this.OrderFrom.orderID, taglist: tid, send_add: this.OrderFrom.send_add, take_add: this.OrderFrom.take_add }
            send_order_put(data).then(resp => {
                console.log(resp)
                this.$message.success('发货成功')
                this.$router.push('/take_goods')
            })
        },
        // 获取订单号
        get_order() {
            order_info_get(this.OrderFrom.orderID).then(resp => {
                console.log(resp)
                this.OrderFrom.orderList = resp.orderlist
            })
        },
        // 获取标签
        get_tag() {
            tag_info_get().then(resp => {
                this.TagInfo = resp.taginfo
                for (let i = 0; i < resp.taginfo.length; i++) {
                    if (resp.taginfo[i].status === 0) this.data.push({ key: resp.taginfo[i].tag_id, desc: resp.taginfo[i].id })
                }
                console.log(this.data)
            })
        },
    }
}
</script>

<style>
.el-input {
    width: 640px;
}
.el-transfer {
    text-align: left;
    display: inline-block;
}
.elcard {
    width: 900px;
    margin: auto;
}
.content {
    margin: 20px 0 10px 0;
}
.inpitel {
    width: 200px;
}
</style>